// 温度
var chartDom = document.getElementById('tem');
var myChart = echarts.init(chartDom, 'dark');
var option;

option = {

  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C',
      show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [11, 9,11, 10, 10, 15, 14],
      color:['#2af270'],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [-1, -2, 2, 1, 1, 1, 2],
      color: ['#17a2b8'],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

option && myChart.setOption(option);

// 降水量
var chartDom2 = document.getElementById('rainFall');
var myChart2 = echarts.init(chartDom2);
var option2;

option2 = {
  title: {
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
    }
  ],
  series: [
    {
      name: '降水量',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      color: ['#17a2b8'],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
        name: '蒸发量',
        type: 'bar',
        color:['#2af270'],
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ],
        markPoint: {
          data: [
            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
  ]
};

option2 && myChart2.setOption(option2);

// 风速
var chartDom3 = document.getElementById('fenSu');
var myChart3 = echarts.init(chartDom3);
var option3;

option3 = {
  xAxis: {
    axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  yAxis: {
    axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  tooltip: {
    trigger:'item',
    formatter:(params) => {  // params就是数据，这里可以打印一下看看
        // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
        return `时间:${params.data[0]}点</br>风速大小:${params.data[1]}m/s`
    }
},
  series: [
    {
      symbolSize: 20,
      label: {
        show:true,
        position:"right",
        formatter: '{@value}'   // 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
    },
    color:['#2af270'],
      data: [
        [2, 1.5],
        [5, 1.7],
        [8, 1.9],
        [11, 1.6],
        [14, 2.3],
        [17, 2.3],
        [20, 2.4],
        [23, 2.7]
      ],
      type: 'scatter'
    }
  ]
};

option3 && myChart3.setOption(option3);

// 湿度

var chartDom4 = document.getElementById('main');
var myChart4 = echarts.init(chartDom4);
var option4;

option4 = {
  title: {
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  yAxis: {
    type: 'category',
    data: ['2：00', '5：00', '8：00', '11：00', '14：00', '15：00','20:00','23:00'],
    axisLabel: {
        show: true,
        textStyle: {
            color: 'white'
        }
    }
  },
  series: [
    {
      name: '湿度大小',
      type: 'bar',
      color:['#2af270'],
      data: [0.821, 0.794, 0.633, 0.41, 0.364, 0.566,0.684,0.821]
    }
  ]
};

option4 && myChart4.setOption(option4);




